const $container = document.querySelector('div')

const scene = new THREE.Scene()

const ambientLight = new THREE.AmbientLight(0x9090900a)
scene.add(ambientLight)

const axisHelper = new THREE.AxesHelper(10)
scene.add(axisHelper)

const camera = new THREE.PerspectiveCamera(45, $container.clientWidth / $container.clientHeight, 1, 1000);
camera.position.y += 1
camera.position.z = 5
// camera.position.x=2
// camera.rotation.x=-5/180*Math.PI
// camera.rotation.y=5/180*Math.PI
// camera.rotation.z=5/180*Math.PI

const renderer = new THREE.WebGLRenderer({
    antialias: true
})
renderer.setSize($container.clientWidth, $container.clientHeight);
renderer.setClearColor(0xffffff)
$container.appendChild(renderer.domElement);

const waterGeometry = new THREE.BoxGeometry(2, 1, 1)
const waterMaterial = new THREE.MeshBasicMaterial({ color: 0x40acf9, opacity: 0.3, transparent: true });
const waterShape = new THREE.Mesh(waterGeometry, waterMaterial);
// cube.rotation.x=0.5
// cube.rotation.y=0.5
scene.add(waterShape)

// const edges = new THREE.EdgesGeometry( waterGeometry );
// const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
// scene.add( line );

const damGeometry = new THREE.BoxGeometry(2, 2, 0.4)
const damMaterial = new THREE.MeshBasicMaterial({ color: 0x87807c, opacity: 0.5, transparent: true });
const damShape = new THREE.Mesh(damGeometry, damMaterial);
damShape.position.z=-(0.5+0.4/2)
damShape.position.y=0.5
scene.add(damShape)

function render(){
    renderer.render(scene, camera)
}

render()

const controls = new THREE.OrbitControls(camera, renderer.domElement)
controls.addEventListener('change', render)
